<template>
  <view class="login-wrapper">
    <nav-bar
      :navTitle="title"
      iconColor="#000"
      :backgroundColor="backgroundColor"
      :isBack="true"
      :isBackgroundColor="false"
    ></nav-bar>
    <view class="shading">
      <image
        src="https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/malePicture.png"
      />
    </view>
    <view class="whiteBg">
      <view class="list" v-if="current !== 1">
        <form @submit.prevent="submit">
          <view class="item">
            <view class="acea-row row-middle">
              <text class="iconfont icon-phone_"></text>
              <input
                type="number"
                class="texts"
                placeholder="输入手机号码"
                v-model="phone"
                maxlength="11"
                required
              />
            </view>
          </view>
          <view class="item">
            <view class="acea-row row-middle">
              <text class="iconfont icon-code_1"></text>
              <input
                type="password"
                class="texts"
                placeholder="填写登录密码"
                maxlength="18"
                v-model="password"
                required
              />
            </view>
          </view>
        </form>
      </view>
      <view class="list" v-if="current !== 0">
        <view class="item">
          <view class="acea-row row-middle">
            <text class="iconfont icon-phone_"></text>
            <input
              type="number"
              class="texts"
              placeholder="输入手机号码"
              v-model="phone"
              maxlength="11"
            />
          </view>
        </view>
        <view class="item">
          <view class="acea-row row-middle">
            <text class="iconfont icon-code_1"></text>
            <input
              type="number"
              placeholder="填写验证码"
              class="codeIput"
              v-model="captcha"
              maxlength="6"
            />
            <text v-if="init" class="seconds">{{ seconds }}S</text>

            <button
              class="code main_color"
              v-else
              :disabled="disabled"
              :class="disabled === true ? 'on' : ''"
              @click="code"
            >
              {{ "获取验证码" }}
            </button>
          </view>
        </view>
        <view class="item" v-if="isShowCode">
          <view class="acea-row row-middle">
            <text class="iconfont icon-code_1"></text>
            <input
              type="number"
              placeholder="填写验证码"
              class="codeIput"
              v-model="codeVal"
              maxlength="6"
            />
            <view class="code" @click="again"><img :src="codeUrl" /></view>
          </view>
        </view>
      </view>
      <view class="protocol acea-row row-between-wrapper">
        <checkbox-group
          class="checkgroup acea-row"
          @change="isAgree = !isAgree"
          style="align-items: end"
        >
          <checkbox class="checkbox" :checked="isAgree ? true : false" />
          <text class="protocol_text"
            >我已阅读并同意<text @click="userAgree('1')" class="font_pro"
              >《用户协议》</text
            ><text @click="userAgree('2')" class="font_pro"
              >《隐私策略》</text
            ></text
          >
        </checkbox-group>
      </view>
      <view class="logon bg_color" @click="loginMobile" v-if="current !== 0"
        >登录</view
      >
      <view class="logon bg_color" @click="submit" v-if="current === 0"
        >登录</view
      >
      <!-- <view class="tips">
        <view v-if="current == 0" @click="current = 1">快速登录</view>
        <view v-if="current == 1" @click="current = 0">账号登录</view>
      </view> -->
    </view>
  </view>
</template>
<script>
import { goToAgreement } from "@/libs/order";
import { Debounce } from "@/utils/validate.js";
import { getVerificationCode, logOnH5 } from "@/api/user";
import navBar from "@/components/navBar";
const BACK_URL = "login_back_url";
// import { silenceBindingSpread } from "@/utils";
export default {
  components: {
    navBar,
  },
  name: "Login",
  data: function () {
    return {
      title: "登录",
      backgroundColor: "#fff",
      password: "",
      phone: "",
      captcha: "",
      isAgree: false,
      seconds: 60, // 验证码数秒
      init: false, // 是否操作获取验证码
      navList: ["快速登录", "账号登录"],
      current: 0,
    };
  },
  mounted: function () {},
  onLoad(options) {},
  methods: {
    // 去协议
    userAgree(num) {
      if (num == "1") {
        goToAgreement("userinfo");
      } else {
        goToAgreement("userprivacyinfo");
      }
    },
    // 登录/注册
    submit() {
      let that = this;
      if (!that.phone)
        return that.$util.Tips({
          title: "请填写账号",
        });
      if (!/^[\w\d]{5,16}$/i.test(that.phone))
        return that.$util.Tips({
          title: "请输入正确的账号",
        });
      if (!that.password)
        return that.$util.Tips({
          title: "请填写密码",
        });
      if (!that.isAgree)
        return that.$util.Tips({
          title: "请勾选用户隐私协议",
        });
      this.logOn();
    },
    // 登录状态
    logOn() {
      let that = this;
      uni.showLoading({
        title: "正在登录中",
      });
      logOnH5({
        phone: that.phone,
        password: that.password,
        remember: true,
      })
        .then(({ data }) => {
          that.$store.commit("LOGIN", {
            token: data.token,
          });
          uni.hideLoading();
          that.getUserInfo(data);
        })
        .catch((e) => {
          uni.hideLoading();
          that.$util.Tips({
            title: e,
          });
        });
    },
    getUserInfo(data) {
      this.$store.dispatch("GetTokenIsExist");
      //分销绑定
      // silenceBindingSpread(true, this.globalData.spread);
      this.$store.dispatch("GetGlobalConfig");
      this.$store.commit("UPDATE_USERINFO", {
        avatar: data.userInfo.avatar,
        nikeName: data.userInfo.nickname,
        phone: data.userInfo.phone,
        voucher: data.userInfo.voucher,
        code: data.userInfo.code,
        icode: data.userInfo.icode,
        identityName: data.userInfo.identityName,
        identity: data.userInfo.identity,
      });
      this.$store.commit("SETUID", data.userInfo.id);
      let backUrl = this.$Cache.get(BACK_URL) || "/pages/index/index";
      console.log(
        "111111111111111111111111111",
        backUrl.indexOf("/pages/users/login/index") !== -1,
        backUrl
      );
      if (backUrl.indexOf("/pages/users/login/index") !== -1) {
        backUrl = "/pages/index/index";
      }
      uni.reLaunch({
        url: backUrl,
      });
    },
    loginMobile() {
      if (!this.isAgree)
        return this.$util.Tips({
          title: "请勾选用户隐私协议",
        });
    },
    code: Debounce(function () {
      let that = this;
      if (!that.phone)
        return that.$util.Tips({
          title: "请填写手机号码",
        });
      if (!this.isAgree)
        return this.$util.Tips({
          title: "请勾选用户隐私协议",
        });
      if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.phone))
        return that.$util.Tips({
          title: "请输入正确的手机号码",
        });
      getVerificationCode({ phone: that.phone, type: 71 }).then((res) => {
        if (res.data === true) {
          this.init = true;
          uni.showToast({
            title: "发送成功",
            icon: "none",
            duration: 1000,
          });
          let secondsEvet = setInterval(() => {
            this.seconds = this.seconds - 1;
            if (this.seconds === 0) {
              clearInterval(secondsEvet);
              this.seconds = 60;
              this.init = false;
            }
          }, 1000);
        }
      });
      // that.$refs.verify.show();
    }),
  },
};
</script>
<style lang="scss" scoped>
.protocol {
  margin: 30rpx 0;
  padding-left: 44rpx;
}

.protocol_text {
  .font_pro {
    color: #e93323;
  }
}

page {
  background: #fff;
}
.main_color {
  color: #e93323;
}

.bg_color {
  color: #e93323;
}

.code img {
  width: 100%;
  height: 100%;
}

.acea-row.row-middle {
  input {
    margin-left: 20rpx;
    display: block;
  }
}

.login-wrapper {
  padding: 30rpx;

  .shading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;

    /* #ifdef APP-VUE */
    margin-top: 50rpx;
    /* #endif */
    /* #ifndef APP-VUE */

    margin-top: 200rpx;
    /* #endif */

    image {
      width: 180rpx;
      height: 180rpx;
    }
  }

  .whiteBg {
    margin-top: 100rpx;

    .list {
      border-radius: 16rpx;
      overflow: hidden;

      .item {
        border-bottom: 1px solid #f0f0f0;
        background: #fff;

        .row-middle {
          position: relative;
          padding: 16rpx 45rpx;

          .texts {
            flex: 1;
            font-size: 28rpx;
            height: 80rpx;
            line-height: 80rpx;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          input {
            flex: 1;
            font-size: 28rpx;
            height: 80rpx;
            line-height: 80rpx;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .code {
            position: absolute;
            right: 30rpx;
            top: 50%;
            color: #e93323;
            font-size: 26rpx;
            transform: translateY(-50%);
          }
        }
      }
    }

    .logon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 86rpx;
      margin-top: 80rpx;
      background-color: #e93323;
      border-radius: 120rpx;
      color: #ffffff;
      font-size: 30rpx;
    }
  }
}
.seconds {
  color: #cacad0 !important;
  font-size: 28rpx !important;
  position: absolute;
  right: 80rpx;
  top: 50%;
  transform: translateY(-50%);
}
.iconfont {
  font-size: 30rpx !important;
}
.tips {
  margin: 30rpx;
  text-align: center;
  color: #999;
}
</style>
